pragma Singleton

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQml 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15
import FluentUI 1.0
import Admin.Auth 1.0

Item {
    FluMenu {
        id: langMenu
        title: qsTr("Lang")
        FluMenuItem {
            text: "中文"
            onTriggered: {
                showInfo(qsTr("中文"))
            }
        }
        FluMenuItem {
            text: "English"
            onTriggered: {
                showInfo(qsTr("English"))
            }
        }
        FluMenuItem {
            text: "日本語"
            onTriggered: {
                showInfo(qsTr("日本語"))
            }
        }
        FluMenuItem {
            text: "Français"
            onTriggered: {
                showInfo(qsTr("Français"))
            }
        }
    }

    Rectangle {
        id: contentHeadBar
        // radius: 2
        color: "#1677FF"
        RowLayout {
            anchors.fill: parent
            spacing: 2

            // 左侧：边栏折叠按钮
            Button {
                id: sideButton
                Layout.preferredWidth: 42
                Layout.fillHeight: true
                icon.source: "qrc:/res/icon/menu-unfold-left.svg"
                icon.color: "white"
                icon.width: 30
                icon.height: 30
                background: Rectangle {
                    id: bg
                    anchors.fill: parent
                    // radius: 8
                    color: {
                        if (sideButton.down)
                        return "#1e90ff"
                        else if (sideButton.hovered)
                        return "#1e90ff"
                        else
                        return "transparent"
                    }
                    layer.enabled: sideButton.down
                    layer.effect: DropShadow {
                        transparentBorder: true
                        horizontalOffset: 1
                        verticalOffset: 1
                        radius: 2
                        samples: 5
                        color: "#40000000"
                    }
                }
                contentItem: Item {
                    anchors.fill: parent
                    Image {
                        source: sideButton.icon.source
                        width: sideButton.icon.width
                        height: sideButton.icon.height
                        anchors.centerIn: parent
                    }
                }
                onClicked: function () {
                    if (GlobalModel.displayMode == FluNavigationViewType.Auto
                            || GlobalModel.displayMode == FluNavigationViewType.Open) {
                        GlobalModel.displayMode = FluNavigationViewType.Compact
                        sideButton.icon.source = "qrc:/res/icon/menu-unfold-right.svg"
                    } else {
                        GlobalModel.displayMode = FluNavigationViewType.Open
                        sideButton.icon.source = "qrc:/res/icon/menu-unfold-left.svg"
                    }
                }
            }

            Item {
                Layout.fillWidth: true
            }
            // 用户头像
            Rectangle {
                id: avatarContainer
                Layout.preferredWidth: 32
                Layout.preferredHeight: 32
                radius: width / 2
                clip: true
                Image {
                    id: avatarImage
                    anchors.fill: parent
                    source: AuthManager.user.avatar ? AuthManager.user.avatar : "qrc:/default_avatar.png"
                    fillMode: Image.PreserveAspectCrop
                    layer.enabled: true
                    layer.effect: OpacityMask {
                        maskSource: Rectangle {
                            width: avatarImage.width
                            height: avatarImage.height
                            radius: width / 2
                        }
                    }
                }
            }
            Label {
                Layout.minimumWidth: 60
                text: AuthManager.user.name
                color: "#dee2e6"
                font.bold: true
                font.pixelSize: 12
                elide: Text.ElideRight
            }
            Button {
                id: langButton
                Layout.preferredWidth: 42
                Layout.fillHeight: true
                icon.source: "qrc:/res/icon/language.svg"
                icon.color: "#e6e6e6"
                icon.width: 20
                icon.height: 20
                background: Rectangle {

                    anchors.fill: parent
                    // radius: 8
                    color: {
                        if (langButton.down)
                        return "#1e90ff"
                        else if (langButton.hovered)
                        return "#1e90ff"
                        else
                        return "transparent"
                    }
                    layer.enabled: langButton.down
                    layer.effect: DropShadow {
                        transparentBorder: true
                        horizontalOffset: 1
                        verticalOffset: 1
                        radius: 2
                        samples: 5
                        color: "#40000000"
                    }
                }
                contentItem: Item {
                    anchors.fill: parent
                    Image {
                        source: langButton.icon.source

                        width: langButton.icon.width
                        height: langButton.icon.height
                        anchors.centerIn: parent
                        layer.enabled: true
                        layer.effect: ColorOverlay {
                            color: langButton.icon.color
                        }
                    }
                }
                onClicked: {
                    langMenu.popup()
                }
            }
        }
    }
}
